<style lang='scss'>
@import "@css/style.scss";
.swiper-pagination {
  .custom-bullet-class {
    box-sizing: border-box;
    border-radius: 100%;
    height: px2rem(6);
    width: px2rem(6);
    border:px2rem(1) solid #fff;
    margin:0 px2rem(4);
    display: inline-block;
    opacity: 1;
  }
  .swiper-pagination-bullet-active{
    background-color: #fff;
  }
  
}
//数字分页器
.swiper-pagination-fraction{
  left: auto;
  right: 0;
  width: auto;
  font-size: $infoSize;
  background-color: rgba(0,0,0,.3);
  padding: px2rem(6) px2rem(18);
  border-top-left-radius: px2rem(16);
  border-bottom-left-radius: px2rem(16);
  bottom: px2rem(32);
  color:#fff;
  .swiper-pagination-current{
    font-size: $titleSize;
    font-weight: bold;
  }
}
</style>
<template>
  <div>
    <!-- 滑动轮播 -->
    <swiper :options="swiperOptions">
      <swiper-slide v-for="(item, index) in swiperImgs" :key="index">
        <img :src="item" :style="{ height: height ,width:'100%'}" />
      </swiper-slide>
      <template v-slot:pagination>
        <div class="swiper-pagination"></div>
      </template>
    </swiper>
  </div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  props: {
    //slide高度
    height: {
      type: String,
      default: "auto",
    },
    swiperImgs: {
      type: Array,
      required: true,
      default: function () {
        return [];
      },
    },
    /**
     * 分页类型
     */
    paginationType:{
      type:String,
      default:'1'
    }
  },
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      //配置
      swiperOptions: {
        autoplay: {
          disableOnInteraction: false,
        },
        autoHeight: true,
        pagination: {
          //分页元素
          el: ".swiper-pagination",
          type: "bullets",
          //分页器内元素类
          bulletClass: "custom-bullet-class",
        },
      },
    };
  },
  mounted() {
    this.init();
  },
  created () {
    this.initPaginnationLayout();
  },
  methods: {
    init() {},
    initPaginnationLayout(){
      switch (this.paginationType) {
        case '1':
          this.swiperOptions.pagination={
            el: ".swiper-pagination",
            type: "bullets",
            bulletClass: "custom-bullet-class",
          }
          break;
        case '2':
          this.swiperOptions.pagination={
            el:'.swiper-pagination',
            type:'fraction'
          }
          break;
      
        default:
          break;
      }
    }
  },
  computed: {},
};
</script>